<template>
    <el-row class="container">
        <el-row class="crumbs">酒店 > 酒店预订</el-row>
        <el-row class="query-price">
            <el-col :span="5">
                 <el-autocomplete
                class="inline-input"
                v-model="city.name"
                :fetch-suggestions="querySearch"
                placeholder="切换城市"
                :trigger-on-focus="false"
                :highlight-first-item ="true"
                @select="setCity"
                ></el-autocomplete>
            </el-col>
            <el-col :span="10">
                <el-date-picker
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="入住日期"
                end-placeholder="离店日期"
                :picker-options="pickerOptions"
                >
                </el-date-picker> 
            </el-col>
            <el-col :span="5" class="ra">
                <el-input
                    readonly
                    placeholder="人数未定"
                    suffix-icon="el-icon-user"
                    v-model="countDesc"
                    @click.native="showOrHideRoompersonWapper"
                    >
                </el-input>
                <el-collapse-transition>
                    <el-row class="roompersonWapper" v-show="showRoomQuery" 
                    >
                        <el-row class="select" type="flex" justify="space-between">
                           <span>每间</span>
                           <el-row class="select-person">
                               <el-select v-model="personNum" placeholder="请选择" size="mini"
                               @change="changePerson"
                               >
                                    <el-option
                                    v-for="item in personOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="childrenNum" placeholder="请选择" size="mini"
                                 @change="changeChild"
                                >
                                    <el-option
                                    v-for="item in childrenOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                           </el-row>
                        </el-row>
                        <el-row class="btnWapper">
                            <el-button type="primary" size="mini" @click="submitCountDesc">确定</el-button>
                        </el-row>
                    </el-row>
                </el-collapse-transition>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="getCity">查看价格</el-button>
            </el-col>
        </el-row>
        <el-row class="areaWapper">
            <el-col :span="14">
                <el-row class="area-top">
                    <el-row class="area">
                        <el-col :span="2">区域：</el-col>
                        <el-col :span="22">
                            <div class="addr" v-if="cityList" ref="addr">
                                <span class="addr-item" 
                                v-for="(item,index) in cityList[0].scenics" :key="index">{{item.name}}</span>
                            </div>
                            <el-row class="swtch" v-if="cityList">
                                <span><i class="el-icon-d-arrow-right" @click="changeAddrStyle"></i></span >等{{cityList[0].scenics.length}}个区域
                            </el-row>
                        </el-col> 
                    </el-row>
                    <el-row class="price">
                        <el-col :span="3">
                            均价<el-tooltip content="等级均价由平日价格计算得出，节假日价格会有上浮。" placement="top-start">
                                <span>?</span>
                            </el-tooltip>：
                        </el-col>
                        <el-col :span="21">
                             <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="bottom">
                            <span class="evaluate">
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <b>¥332</b>
                            </span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="bottom">
                            <span class="evaluate">
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <b>¥332</b>
                            </span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="等级评定是针对房价，设施和服务等各方面水平的综合评估。" placement="bottom">
                            <span class="evaluate">
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <b>¥332</b>
                            </span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </el-row>
            </el-col>
            <el-col :span="10" class="mapWapper">
                <!-- <el-row 
                v-loading="loading"
                element-loading-text="拼命加载中" 
                element-loading-spinner="el-icon-loading">
                    <div id="container" class="map"></div>
                </el-row> -->
            </el-col>
        </el-row>
        <el-row class="chooseWapper">
           <el-col :span="5">
               <el-row>
                   <el-row class="desc" type="flex" justify="space-between">
                       <span>价格</span>
                       <b>0-4000</b>
                   </el-row>
                   <el-row class="progress">
                       <el-slider v-model="price_lt" :max="4000" @change="setPriceLt"></el-slider>
                   </el-row>
               </el-row>
           </el-col>
           <el-col :span="4">
               <el-row class="desc">住宿等级</el-row>
               <el-dropdown @command="setLevels">
                    <span class="el-dropdown-link">
                        <b>{{hotellevel_inDesc}}</b><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item 
                        :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'" 
                        v-for="(item,index) in optionsList.levels" 
                        :key="index" 
                        :command="item"
                        >{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
               </el-dropdown>
           </el-col>
           <el-col :span="4">
               <el-row class="desc">住宿类型</el-row>
               <el-dropdown @command="setTypes">
                    <span class="el-dropdown-link">
                        <b>{{hoteltype_inDesc}}</b><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item 
                        :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'" 
                        v-for="(item,index) in optionsList.types" 
                        :key="index" 
                        :command="item"
                        >{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
               </el-dropdown>
           </el-col>
           <el-col :span="4">
               <el-row class="desc">酒店设施</el-row>
               <el-dropdown @command="setAssets">
                    <span class="el-dropdown-link">
                        <b>{{hotelasset_inDesc}}</b><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item 
                        :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
                        v-for="(item,index) in optionsList.assets" 
                        :key="index" 
                        :command="item"
                        >{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
           </el-col>
           <el-col :span="4">
               <el-row class="desc">酒店品牌</el-row>
               <el-dropdown @command="setBrands">
                    <span class="el-dropdown-link">
                        <b>{{hotelbrand_inDesc}}</b><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="dropdown">
                        <el-dropdown-item 
                        :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
                        v-for="(item,index) in optionsList.brands" 
                        :key="index" 
                        :command="item"
                        >{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
               </el-dropdown>
           </el-col>
           <el-col :span="3">
               <el-button type="primary" @click="clearHotelQuery">撤销条件</el-button>
           </el-col>
        </el-row>
        <!-- 展示酒店 begin -->
        <HotelTab :hotelList="hotelList" :loading="loading"/>
        <el-row class="page-box" v-if="hotelList.length > 0">
            <el-pagination
            align="right"
            small
            layout="prev, pager, next"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
            </el-pagination>
        </el-row>
        <!-- 展示酒店 end -->
    </el-row>   
</template>
<script>
import HotelTab from '@/components/hotel/HotelTab'
export default {
    data(){
        return{
            loading:false,
            total:0,
            pageIndex:1,
            pageSize:5,
            showRoomQuery:false,
            addrShow:false,
            city:{
                id:'',
                name:''
            },
            date:null,
            countDesc:'',
            personNum:'2成人',
            childrenNum:'0儿童',
            price_lt:4000,
            hotellevel_inList:[],
            hoteltype_inList:[],
            hotelasset_inList:[],
            hotelbrand_inList:[],
            markers:[],
            cityList:null,
            hotelList:[],
            optionsList:[],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },      
            personOptions:[{
                value: '1',
                label: '1'
            }, {
                value: '2',
                label: '2'
            }, {
                value: '3',
                label: '3'
            }, {
                value: '4',
                label: '4'
            }, {
                value: '5',
                label: '5'
            },{
                value: '6',
                label: '6'
            },{
                value: '7',
                label: '7'
            }],
            childrenOptions:[{
                value: '0',
                label: '0'
            }, {
                value: '1',
                label: '1'
            }, {
                value: '2',
                label: '2'
            }, {
                value: '3',
                label: '3'
            }, {
                value: '4',
                label: '4'
            }]
        }
    },
    computed:{
        hotellevel_inDesc(){
            let desc = this.hotellevel_inList.length > 1 ? '已选'+this.hotellevel_inList.length+'项':this.hotellevel_inList.length == 1 ? this.hotellevel_inList[0].hotellevel_inName : '不限';
            return desc;
        },
        hoteltype_inDesc(){
            let desc = this.hoteltype_inList.length > 1 ? '已选'+this.hoteltype_inList.length+'项':this.hoteltype_inList.length == 1 ? this.hoteltype_inList[0].hoteltype_inName : '不限';
            return desc;
        },
        hotelasset_inDesc(){
            let desc = this.hotelasset_inList.length > 1 ? '已选'+this.hotelasset_inList.length+'项':this.hotelasset_inList.length == 1 ? this.hotelasset_inList[0].hotelasset_inName : '不限';
            return desc;
        },
        hotelbrand_inDesc(){
            let desc = this.hotelbrand_inList.length > 1 ? '已选'+this.hotelbrand_inList.length+'项':this.hotelbrand_inList.length == 1 ? this.hotelbrand_inList[0].hotelbrand_inName : '不限';
            return desc;
        },
    },
    components:{
       HotelTab
    },
    methods:{
        loadMap(){
            // 这里的代码有顺序
            window.onLoad = () => {
                // 地图库加载完毕的回调函数
                let map = new AMap.Map('container', {
                    zoom:21,//级别
                    center: [113.32459, 23.10668]//中心点坐标
                });
                
                if(this.markers){
                   map.clearMap();  // 清除地图覆盖物

                   this.markers.forEach(function(marker) {
                        let mark = new AMap.Marker({
                            map: map,
                            icon:new AMap.Icon({            
                                image: marker.icon,
                                size: new AMap.Size(38, 60),  //图标大小
                                imageSize: new AMap.Size(22, 36)
                            }),        
                            position: [marker.position[0], marker.position[1]],
                            extData:marker.extData
                        });
                        // 设置覆盖物
                        mark.setTop();
                        // 显示一个提示窗
                        const infoWin = new AMap.InfoWindow({
                            content:`<span style="font-size:12px;color:#333;">${marker.title}</span>`,
                            offset:new AMap.Pixel(0,-32)
                        });
                        // infoWin.open(map,mark.getPosition());
                        // map.setCenter(mark.getPosition());
                        mark.setLabel({
                            content:marker.index
                        })

                        // 给marker添加悬浮事件
                        AMap.event.addListener(mark,'mouseover',function(e){
                             if(mark.getExtData() == e.target.Ce.extData){
                                infoWin.open(map,mark.getPosition());
                                //map.setCenter(mark.getPosition());//设置中心点
                             }
                        });
                        AMap.event.addListener(mark,'mouseout',function(e){
                             if(mark.getExtData() == e.target.Ce.extData){
                                infoWin.close(map,mark.getPosition());
                                //map.setCenter(mark.getPosition());
                             }
                        });
                    });
                    // 让地图自适应显示所有点
                    map.setFitView();
                }
            }
            //加载高德地图库
            // 动态创建script标签
            let url = 'https://webapi.amap.com/maps?v=1.4.15&key=bcc76cc6df268f47e78f76e0cb9c03ed&callback=onLoad';
            let jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        },
        querySearch(querystring,callback){
            this.$axios({
                url:'/airs/city',
                params:{name:querystring}
            }).then(res => {
                const cityList = res.data.data.map(item => {
                    return {
                        value:item.name.replace(/市$/,''),
                        id:item.id
                    }
                });
                // 处理如果不选择下拉建议的值
                if(cityList.length > 0){
                    this.city.id = cityList[0].id;
                }
                callback(cityList);
            })
        },
        setCity(selectVal){
            this.city.id = selectVal.id;
        },
        changePerson(val){
            this.personNum = val + '成人';
        },
        changeChild(val){
            this.childNum = val + '儿童';
        },
        submitCountDesc(){
            this.countDesc = this.personNum + ' ' + this.childrenNum;
            this.showRoomQuery = false;
        },
        showOrHideRoompersonWapper(){
            this.showRoomQuery = !this.showRoomQuery;
        },
        loadOptions(){
            this.$axios({
                url:'/hotels/options'
            }).then(res => {
                for(let key in res.data.data){
                    res.data.data[key] = res.data.data[key].map(item => {
                        return{
                            ...item,
                            isChoose:false
                        }
                    });
                }
                this.optionsList = res.data.data;
            })
        },
        setPriceLt(val){
            this.price_lt = val;
            this.getHotels();
        },
        setLevels(val){
            if(this.hotellevel_inList.length > 0){
                for(let i=0;i<this.hotellevel_inList.length;i++){
                    if(this.hotellevel_inList[i].hotellevel_in == val.id){
                        this.optionsList.levels.forEach(item => {
                            if(item.id == val.id){
                                item.isChoose = false;
                            }
                        });
                         // 删除
                        this.hotellevel_inList.splice(i,1);
                        this.getHotels();
                        return;
                    }
                }
            }
            
            let hotellevel_ins = {
                hotellevel_in:val.id,
                hotellevel_inName:val.name
            }
            this.optionsList.levels.forEach(item => {
                if(item.id == val.id){
                    item.isChoose = true;
                }
            });
            this.hotellevel_inList.push(hotellevel_ins);
            this.getHotels();
        },
        setTypes(val){
            if(this.hoteltype_inList.length > 0){
                for(let i=0;i<this.hoteltype_inList.length;i++){
                    if(this.hoteltype_inList[i].hoteltype_in == val.id){
                        this.optionsList.types.forEach(item => {
                            if(item.id == val.id){
                                item.isChoose = false;
                            }
                        });
                         // 删除
                        this.hoteltype_inList.splice(i,1);
                        this.getHotels();
                        return;
                    }
                }
            }
            
            let hoteltype_ins = {
                hoteltype_in:val.id,
                hoteltype_inName:val.name
            }
            this.optionsList.types.forEach(item => {
                if(item.id == val.id){
                    item.isChoose = true;
                }
            });
            this.hoteltype_inList.push(hoteltype_ins);
            this.getHotels();
        },
        setAssets(val){
           if(this.hotelasset_inList.length > 0){
                for(let i=0;i<this.hotelasset_inList.length;i++){
                    if(this.hotelasset_inList[i].hotelasset_in == val.id){
                        this.optionsList.assets.forEach(item => {
                            if(item.id == val.id){
                                item.isChoose = false;
                            }
                        });
                         // 删除
                        this.hotelasset_inList.splice(i,1);
                        this.getHotels();
                        return;
                    }
                }
            }
            
            let hotelasset_ins = {
                hotelasset_in:val.id,
                hotelasset_inName:val.name
            }
            this.optionsList.assets.forEach(item => {
                if(item.id == val.id){
                    item.isChoose = true;
                }
            });
            this.hotelasset_inList.push(hotelasset_ins);
            this.getHotels();
        },
        setBrands(val){
            if(this.hotelbrand_inList.length > 0){
                for(let i=0;i<this.hotelbrand_inList.length;i++){
                    if(this.hotelbrand_inList[i].hotelbrand_in == val.id){
                        this.optionsList.brands.forEach(item => {
                            if(item.id == val.id){
                                item.isChoose = false;
                            }
                        });
                         // 删除
                        this.hotelbrand_inList.splice(i,1);
                        this.getHotels();
                        return;
                    }
                }
            }
            
            let hotelbrand_ins = {
                hotelbrand_in:val.id,
                hotelbrand_inName:val.name
            }
            this.optionsList.brands.forEach(item => {
                if(item.id == val.id){
                    item.isChoose = true;
                }
            });
            this.hotelbrand_inList.push(hotelbrand_ins);
            this.getHotels();
        },
        getCity(){
            this.$axios({
                url:'/cities',
                params:{
                    name:this.city.name
                }
            }).then(res => {
                this.city.id = res.data.data[0].id;
                this.cityList = res.data.data;
                this.getHotels();
            })
        },
        getHotels(){
            this.loading = true;
            //参数拼接处理
            let paramsStr = '?city=' + this.cityList[0].id + '&price_lt='+this.price_lt;
            if(this.date){
                paramsStr += '&enterTime=' + this.date[0] + '&leftTime=' + this.date[1];
            }
            this.hotellevel_inList.forEach(item => {
                paramsStr += '&hotellevel_in=' + item.hotellevel_in;
            });
            this.hoteltype_inList.forEach(item => {
                paramsStr += '&hoteltype_in=' + item.hoteltype_in;
            });
            this.hotelasset_inList.forEach(item => {
                paramsStr += '&hotelasset_in=' + item.hotelasset_in;
            });
            this.hotelbrand_inList.forEach(item => {
                paramsStr += '&hotelbrand_in=' + item.hotelbrand_in;
            });

            if(this.pageIndex > 1){
                // 修改路由
                this.$router.push('/hotel' + paramsStr + '&page=' + this.pageIndex);
                paramsStr += '&_start=' + (this.pageIndex - 1)*this.pageSize;
            }


            this.$axios({
                url:'/hotels' + paramsStr,
            }).then(res => {
                this.total = res.data.total;
                this.hotelList = res.data.data.map(item => {
                    return{
                        ...item,
                        ranComment:Math.floor(Math.random()*90) + 10,
                        ranTravels:Math.floor(Math.random()*90) + 10
                    }
                });
                // // 取酒店坐标点
                // // 添加前清空
                // this.markers = [];
                // this.hotelList.forEach((item,index) => {
                //     let obj = {
                //         icon:'https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
                //         title: item.name,
                //         content: '<div>'+item.name+'</div>', 
                //         position: [item.location.longitude, item.location.latitude],
                //         index:index + 1,//数字标注
                //         extData:item.id
                //     }
                //     this.markers.push(obj);
                // });
                // // 加载点标记
                // this.loadMap();
                this.loading = false;
            })
        },
        getCityByIp(){
            this.$axios({
                url:'https://restapi.amap.com/v3/ip',
                params:{
                    key:'829ed92b9947deb02e2da860197db068'
                }
            }).then(res => {
                this.$message.info(res.data.city);
                this.city.name = res.data.city.replace(/市$/,'');
                this.$router.push('/hotel?cityName=' + this.city.name);
                this.getCity();
            })
        },
        clearHotelQuery(){
            // 重置选项
            for(let key in this.optionsList){
                this.optionsList[key].forEach(item => {
                    item.isChoose = false; 
                });
            }
            this.price_lt = 4000;
            this.hotellevel_inList = [];
            this.hoteltype_inList = [];
            this.hotelasset_inList = [];
            this.hotelbrand_inList = [];
            this.getHotels();
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.getHotels();
        },
        handleCurrentChange(val){
            this.pageIndex = val;
            this.getHotels();
        },
        changeAddrStyle($event){
            if(!this.addrShow){
                this.$refs.addr.style.height = 'auto';
                $event.target.style.transform = 'rotate(270deg)';
                this.addrShow = true;
            }else{
                this.$refs.addr.style.height = '40px';
                $event.target.style.transform = 'rotate(90deg)';
                this.addrShow = false;
            }
        }
    },
    mounted(){
        this.loadOptions();
    },
    created(){
        this.getCityByIp();
    }
}
</script>

<style lang="less" scoped>
.container{
    width:1000px;
    margin:20px auto;
}
.crumbs{
    font-size: 13px;
    color: #303133;
}
.query-price{
    margin:20px 0;
    .el-col{
        &:nth-child(2){
            //padding-left: 14px;
            text-align: center;
        }
        &:last-child{
            padding-left: 16px;
        }
    }
}
.areaWapper{
    font-size: 14px;
    color: #666666;
    .area-top{
        .area{
            .el-col{
                &:last-child{
                    padding-left: 20px;
                }
            }
            .addr{
                height:40px;
                overflow: hidden;
                .addr-item{
                   margin-right: 18px;
                }
            }
            .swtch{
                margin-top: 6px;
                .el-icon-d-arrow-right{
                    margin-right: 5px;
                    color: #FF9D4A;
                    transform:rotate(90deg);
                    cursor: pointer;
                }
            }
        }
        .price{
            margin-top: 20px;
            .el-col{
                &:first-child{
                    span{
                        display: inline-block;
                        width:15px;
                        height:15px;
                        text-align: center;
                        line-height: 15px;
                        color: #fff;
                        background-color: #CCCCCC;
                        border-radius: 50%;
                        transform:translate(2px,-10px);
                    }
                }
                &:last-child{
                    .evaluate{
                        margin-right: 24px;
                        .iconhuangguan{
                            color: #FF9300;
                        }
                        b{
                            font-weight: 400;
                            color: #666666;
                        }

                    }
                }
            }
        }
    }
    .mapWapper{
        // .map{
        //     width: 407px;
        //     height: 260px;
        // }
    }
}
.chooseWapper{
    box-sizing: border-box;
    width:100%;
    height: 80px;
    margin-top: 20px;
    padding:5px 0;
    border:1px solid #DDDDDD;
    .el-col{
        height:100%;
        padding:8px 20px;
        color: #666666;
        font-size: 14px;
        border-right: 1px solid #DDDDDD;
        &:last-child{
            padding:0;
            border-right: 0;
            text-align: center;
            line-height: 70px;
        }
        .desc{
            margin-bottom: 8px;
            b{
               font-weight: 400;
            }
        }
        .options{
            
        }
    }
}
.ra{
    position: relative;
}
.roompersonWapper{
    position: absolute;
    left:0;
    top:50px;
    width: 324px;
    height: 122px;
    background-color: #fff;
    box-shadow:0 0 5px rgba(0, 0, 0, .3);
    z-index: 99;
    border-radius: 5px;
    //border:1px solid pink;
    .select{
        height: 60px;
        line-height: 60px;
        padding:0 12px;
        font-size: 12px;
        color: #5F6266;
        border-bottom: 1px solid #DDDDDD;
        span{
           font-size: 14px;
        }
    }
    .btnWapper{
        height: 62px;
        width: 100%;
        line-height: 62px;
        text-align: right;
        padding-right: 12px;
    }
}
.page-box{
    padding:20px 20px 20px 0;
}
/deep/.el-rate__icon{
    font-size: 24px;
}
/deep/.el-icon-star-off{
    font-size: 20px;
}
/deep/.el-icon-user{
    font-size: 20px;
}
/deep/.el-select{
    width:95px;
}
/deep/.el-dropdown-link{
    width:125px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    b{
        font-weight: 400;
    }
}
.dropdown{
    max-height: 230px;
    overflow: auto;
}
//  #container /deep/.amap-marker-label{
//     border:0;
//     background: transparent;
//  }
// #container /deep/.amap-marker-label{
//     width:22px;
//     border:0 none; 
//     background: transparent;
//     text-align: center;
//     //padding:0 5px 0 4px;
//     line-height: 20px;
//     color: #fff;
//     font-size: 16px;
//     font-weight: 450;
//     transform: translate(-3px,-2px);//平移
// }
</style>